<!-- 首页 -->
<template>
	<div>
		<!--    <van-popup v-model:show="show" position="left" class="sidebar" @close="closeSideBar">
      <SideBar @closeSideBar="closeSideBar"></SideBar>
    </van-popup>
    <div class="carousel">
      <van-swipe :autoplay="3000" lazy-render :loop="true" :show-indicators="false">
        <van-swipe-item v-for="(item, index) in carouselList" :key="index">
          <image-load :filePath="item.imgUrl" alt="" class="carouselItem" @click="linkto(item)" />
        </van-swipe-item>
      </van-swipe>
      <div class="top">
        <div>
          <Logo></Logo>
        </div>
        <div>
          <svg-load name="user" class="rightImg" @click="openSideBar"></svg-load>
        </div>
      </div>
    </div> -->
		<!-- <div class="Preview">
			<div class="Preview-title">
				<span>{{ _t18('coinbase_h_l_hot') }}
				</span>
				<span @click="$router.push('/trade')">{{ _t18('exchange_more') }}&gt;</span>
			</div>
		</div> -->
		<!-- <div class="currentList" ref="scrollContainer">

			<div class="item centerItem" v-for="(item, index) in dataList" :key="index" @click="linkTo(item)">
				<div class="itemTop fw-num">{{ item.showSymbol }}</div>
				<div :class="[
            _isRFD(
              tradeStore.allCoinPriceInfo[item.coin]?.openPrice,
              tradeStore.allCoinPriceInfo[item.coin]?.close
            ),
            'rfd-sign itemMain fw-num'
          ]"> -->
					<!-- {{ tradeStore.allCoinPriceInfo[item.coin]?.priceChangePercent }}%
				</div>
				<div :class="[
            _isRFD(
              tradeStore.allCoinPriceInfo[item.coin]?.open,
              tradeStore.allCoinPriceInfo[item.coin]?.close
            ),
            'itemFooter fw-num'
          ]"> -->
					<!-- {{ tradeStore.allCoinPriceInfo[item.coin]?.close }}
				</div> -->
				<!-- 	<img class="itemTop fw-num">{{ item.logo }}</div> -->
				<!--查看更多-->
				<!-- <img class="itemImage" :src="item.logo" /> -->
				<!-- <div class="item-but" @click="linkTo(item)" >{{ _t18('host.detail') }}</div> -->
				<!-- <div class="item-but" @click="linkTo(item)">{{ _t18('vote_now') }}</div> -->

			<!-- </div>
		</div> -->
	</div>
</template>

<script setup>
	import {
		useTradeStore
	} from '@/store/trade/index'
	import {
		useMainStore
	} from '@/store/index.js'
	import {
		useRouter
	} from 'vue-router'
	import {
		onMounted
	} from 'vue'
	import {
		publiceNotice
	} from '@/api/common/index'
	import {
		computed
	} from 'vue'

	// const show = ref(false)
	// const openSideBar = () => {
	//   show.value = true
	// }
	// const closeSideBar = () => {
	//   show.value = false
	// }
	const tradeStore = useTradeStore()
	const mainStroe = useMainStore()
	const $router = useRouter()

	const dataList = computed(() => {
		let tempData = []

		// Get the list of coins that are open from the main store
		let tempFilterKey = mainStroe.getHomeCoinList.filter((item) => item.isOpen === 'true').map((item) => item
			.coin)
		// console.log('Filtered keys:', tempFilterKey)

		// Find matching items in tradeStore.secondContractCoinList
		tempFilterKey.forEach((coin) => {
			const matchingItem = tradeStore.secondContractCoinList.find((item) => item.coin === coin)
			if (matchingItem) {
				tempData.push(matchingItem)
				console.log('Matching item:', matchingItem)
			}
		})

		// console.log('Final data list:', tempData)
		return tempData
	})

	const linkTo = (item) => {
		mainStroe.setTradeStatus(Number(0))
		$router.push(`/trade?symbol=${item.coin}`)
	}
</script>
<style lang="scss" scoped>
	.Preview {
		padding: 0 .426667rem;
		margin-top: .106667rem;

		.Preview-title {
			// padding: .533333rem 0;
			display: flex;
			justify-content: space-between;
		}

		span {
			font-size: .40rem;
		}
	}

	.currentList {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 0.8rem);
		/* top: 4.586667rem; */
		background-color: var(--ex-home-box-background-color);
		box-shadow: 0px 0.08rem 0.266667rem 0.026667rem rgba(0, 0, 0, 0.1);
		border-radius: 0.266667rem;
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding: 0.533333rem 0;
		gap: 0.233333rem;

		/* Hide scrollbar for Chrome, Safari and Opera */
		&::-webkit-scrollbar {
			display: none;
		}

		padding: 20px 0;

		// gap: 20px; // Add spacing between items
		.item {
			min-width: 3.733333rem;
			padding: .4rem .266667rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: rgba(86, 93, 140, .32);
			border-radius: .266667rem;
			border: .026667rem solid var(--ex-border-line);
			-webkit-backdrop-filter: blur(.266667rem);
			backdrop-filter: blur(.266667rem);
			position: relative;

			&:before {
				z-index: -1;
				position: absolute;
				top: 30%;
				left: 35%;
				content: " ";
				width: 30%;
				height: 40%;
				background: rgba(255, 255, 255, .3);
				filter: blur(.933333rem);
			}

			.itemTop {
				font-size: 14px;
				color: var(--ex-default-font-color);
				font-weight: 400;
			}

			.item-but {
				margin-top: .32rem;
				text-align: center;
				width: 3.2rem;
				padding: .266667rem;
				background: #613af1;
				border-radius: .24rem;
				font-size: .373333rem;
				color: #fff;
			}

			.itemMain {
				margin-top: 5px;
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: 400;

				.itemMainImg {
					width: 24px;
					height: 24px;
					margin-right: 5px;
				}
			}

			.itemFooter {
				display: flex;
				font-size: 16px;
				margin-top: 5px;
			}

			.itemImage {
				margin-top: .32rem;
				width: 1.333333rem;
				height: 1.333333rem;
				border-radius: .266667rem;
			}

		}

		.centerItem {
			justify-content: center;
			align-items: center;
		}
	}
</style>